import React, { Component } from 'react';

class QrCode extends Component {
  constructor (props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
    this.handleClickQr = this.handleClickQr.bind(this);
    this.state = {
      active: false
    };
  }
  componentDidMount () {
    document.body.addEventListener('click', e => {
      // console.log(e.target)
      if (e.target && e.target.matches('img')) {
        return;
      }
      this.setState({
        active: false
      });
    });
    // this.refs.qr.addEventListener('click', e => {
    //   e.stopPropagation();
    // });
  }
  componentWillUnmount () {
    document.body.removeEventListener('click');
    // this.refs.qr.removeEventListener('click');
  }
  handleClick () {
    this.setState({
      active: !this.state.active
    });
  }
  handleClickQr (e) {
    console.log(e);
    // 阻止冒泡
    e.stopPropagation();
  }
  fnClick (num, e) {
    console.log(num);
    e.stopPropagation();
  }
  render() {
    return (
      <div className="qr-warpper" style={{'height': '100vh'}}>
        <button className="qr" onClick={this.handleClick}>二维码</button>
        <br/>
        <div
          ref="qr"
          className="code"
          style={{display: this.state.active ? 'inline-block' : 'none'}}
          // onClick={this.handleClickQr}
        >
          <img src="http://bpic.588ku.com/element_origin_min_pic/01/48/34/7657442144c5df2.jpg" alt="" width="200px"/>
        </div>

        <div onClick={this.fnClick.bind(this, 1)} className="box" data-index="1">
          div1
          <div onClick={this.fnClick.bind(this, 2)} className="box" data-index="2">
            div2
            <div onClick={this.fnClick.bind(this, 3)} className="box" data-index="3">
              div3
            </div>
          </div>
        </div>
      </div>
    );
  }

}

export default QrCode;
